<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>set</title>
	<style type="text/css">
	 body {
	      padding: 200px;
	  }

	  * {
	      padding: 0;
	      margin: 0;
	  }

	  input {
	      width: 200px;
	      border: solid 1px #d63031;
	      outline: none;
	      padding: 10px;
	      box-sizing: border-box;
	  }

	  ul {
	      list-style: none;
	      width: 200px;
	      padding-top: 20px;
	  }

	  ul li {
	      border: solid 1px #ddd;
	      padding: 10px;
	      margin-bottom: -1px;
	  }

	  ul li:nth-of-type(odd) {
	      background: #00b894;
	  }
</style>

<body>
  <input type="text">
  <ul id="ul"></ul>
</body>
	<script type="text/javascript">
	let obj = {
		words : new Set(),
		set keyword(word) {
			this.words.add(word)
		},
		show() {
			var ul = document.querySelector('ul')
			var lis = []
			this.words.forEach(value => {
				lis.push(`<li>${value}</li>`)
			})
			ul.innerHTML = lis.join('')
		}
	}		

	var input = document.querySelector('input') ;

	input.addEventListener('blur', function(e) {
		obj.keyword = this.value
		console.log(obj.words)
		obj.show()
	})

	input.addEventListener('keyup', function(e) {
		var val = e.target.value.trim()
		if(e.type === 'keyup' && e.which === 13 && val) {
			obj.keyword = this.value
			obj.show()
		}
	})

	</script>
</body>
</html>